@import "../../assets/base.scss";
@import "../../assets/font/iconfont.wxss";

// 遮罩层
.maskbox{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(0,0,0,0.5)
}

.stateBox {
  position: fixed;
  width: 750rpx;
  height: auto;
  top: 0;
  left: 0;
  z-index: 4;
  // 顶部按钮组
  .linkButtons {
    display: flex;
    width: 750rpx;
    height: 90rpx;
    border-bottom: 1rpx solid $borderColor;
    background-color: #fff;
    .button {
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      width: 33.33%;
      height: inherit;
      border-right: 1rpx solid $borderColor;
      &:last-child {
        border-right: 0;
      }
      &:active {
        background-color: #e4e2e2;
      }

      .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60rpx;
        height: 60rpx;
        text-align: center;
        .iconfont{
          display: block;
          font-size: 50rpx;
          color: $themeColor;
        }
        .bf-lishijilu{
          font-size: 56rpx;
        }
        .bf-fabu{
          font-size: 52rpx;
        }
      }
      .name {
        font-size: $subTitleSize;
        margin-left: 12rpx;
      }
    }
  }

  // 搜索框
  .searchBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 750rpx;
    height: 90rpx;
    background: #fff;
    .input {
      display: flex;
      align-items: center;
      width: 580rpx;
      height: 48rpx;
      border-radius: 48rpx;
      border: 2rpx solid $borderColor;
      font-size: 22rpx;
      color: #999;
      background: #fff;
      .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70rpx;
        height: 100%;
      }
    }
  }

  // 筛选框
  .selectBar {
    position: relative;
    display: flex;
    align-items: center;
    width: 750rpx;
    height: 80rpx;
    background-color: #fff;
    border-bottom: 1rpx solid $borderColor;
    .model {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 32%;
      height: 60rpx;
      font-size: 26rpx;
      font-weight: 600;
      color: $subTitleColor;
      image {
        display: inline-block;
        width: 22rpx;
        margin-right: 12rpx;
        margin-left: 8rpx;
      }
      &:nth-child(1),
      &:nth-child(2) {
        width: 25%;
      }
    }
    // 下拉筛选框
    .showSelectBox {
      position: absolute;
      width: 750rpx;
      height: auto;
      left: 0;
      top: 100%;
      background: #fff;
      z-index: 3;
      .item{
        width: 100%;
        padding-left: 40rpx;
        height: 74rpx;
        line-height: 74rpx;
        font-size: $subTitleSize;
        color: $subTitleColor;
        border-top: 1rpx solid $borderColor;
        &:active{
          background-color: #f5f5f5;
        }
        &:last-child{
          border-bottom: 1px solid $borderColor;
        }
      }
      // 被激活的item
      .isActive{
        color: $themeColor;
      }
    }

    .active > image {
      transform: rotate(-180deg);
    }
  }
}

.showContentBox {
  padding-top: 260rpx;
  background: #f5f5f5;
  //内容显示
  @import "../../templates/taskShowModel/style.scss";

  // 底线
  .bottomLine {
    @extend .bottomLineModel;
    background: transparent;
  }
}
